<template>
  <div id="codearea">
  </div>
</template>

<script>
import EventBus from '../lib/eventbus';

export default {
  name: 'codearea',
  data() {
    return {
    }
  },
  mounted () {
    // Constructor receives a selector that indicates
    // where to inject the demonstration in your page.
    const demo = new GDemo('#codearea');


    EventBus.$on('code-open', () => {
      demo.openApp('editor', { minHeight: '700px', windowTitle: 'temp.js' }).end();
    });

    EventBus.$on('code-write', (arg) => {
      const code = `
function main () {
  console.log("${arg.join(' ')}");
}
main();`
console.log(code);
console.log(arg);
console.log(arg.join(' '));
      demo.write(code, { onCompleteDelay: 1500 }).end();
    });

/*
        const code = `
function greet(){
  console.log("Hello World!");
}

greet();
    `

    demo
    .openApp('editor', {minHeight: '350px', windowTitle: 'demo.js'})
    .write(code, {onCompleteDelay: 1500})
    .end();
    */
  }
};
</script>

<style lang="less">
#codearea {
  text-align: left;
  margin-top: 100px;
  padding: 20px;
}
</style>
